$(document).ready(function(){ // ready start

        // *****  socket start  *****
        $('#h1').html(123)
        element = document.getElementsByTagName('h1')
        element.innerHTML = "Milk"
    
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        // window.alert('socket')
    
        // listening: default event
        socket.on('connect', function () {
            console.log('connect event: initial socketio')
            socket.emit('my event', {
                data: 'User Connected'
            })
            var form = $('form').on('submit', function (e) {
                e.preventDefault()
                let user_name = $('input.username').val()
                let user_input = $('input.message').val()
                socket.emit('my event', {
                    user_name: user_name,
                    message: user_input
                })
                $('input.message').val('').focus()
            })
        })
    
        socket.on('message', function(){
            console.log('message event: send a string message')
            socket.send('message event: send a string message')
        })
    
        socket.on('json', function(){
            console.log('json event: send a json message')
            socket.send('json event: send a json message')
        })
    
        socket.on('disconnect', function(){
            console.log('disconnect event: send a disconnect message')
            socket.send('disconnect event: send a disconnect message')
        })
    
        // listening: custom event
        socket.on('my response', function (msg) {
            console.log(msg)
            if (typeof msg.user_name !== 'undefined') {
                $('h3').remove()
                $('div.message_holder').append('<div><b style="color: #000">' + msg.user_name + '</b> ' + msg.message + '</div>')
            }
        })
        // *****  socket end  *****

        
});  // ready start